require(['./config'], () => {
  require(['swiper',"template",'header', 'footer'], (Swiper,template) => {
    class Index {
      constructor() {
        this.banner()
        this.getDate("阿玛尼粉底")
        this.tabHead()
       
      }
      banner() {
        var mySwiper1 = new Swiper('.banner-swiper .swiper-container', {
          autoplay: {
            delay: 2000
          },
          // autoplayStopOnLast : false,
          loop: true, // 循环模式选项
          speed: 300,
          // 如果需要分页器
          pagination: {

            el: '.banner-swiper .swiper-pagination',
    
            type: 'custom',
    
            autoplayDisableOnInteraction : false,
    
            renderCustom: function (swiper, current, total) {
              var paginationHtml = "";
              for (var i = 0; i < total; i++) {
                // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
                if (i === (current - 1)) {
                  paginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                }else{
                  paginationHtml += '<span class="swiper-pagination-customs"></span>';
                }						  
              }
              return paginationHtml;
            },
          },
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.banner .swiper-button-next',
            prevEl: '.banner .swiper-button-prev',
          },
        })
        var mySwiper2 = new Swiper('.content-roll .swiper-container', {
          autoplay: {
            delay: 2000
          },
          // autoplayStopOnLast : false,
          loop: true, // 循环模式选项
          speed: 300,
          // 如果需要分页器
          pagination: {

            el: '.content-roll .swiper-pagination1',
    
            type: 'custom',
    
            autoplayDisableOnInteraction : false,
    
            renderCustom: function (swiper, current, total) {
              var paginationHtml = "";
              for (var i = 0; i < total; i++) {
                // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
                if (i === (current - 1)) {
                  paginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                }else{
                  paginationHtml += '<span class="swiper-pagination-customs"></span>';
                }						  
              }
              return paginationHtml;
            },
          },
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.banner .swiper-button-next',
            prevEl: '.banner .swiper-button-prev',
          },
        })
      }
      tabHead(){
           const _this=this
          $(".tab-top-warp").on("click",function(e){
            const tab=$(this).data('tab')
            _this.getDate(tab)
            console.log(tab);
            const $target = $(e.target)
            if ($target.is(".tab-top-warp")) {
              $target.css({
                color:'#000',
                borderBottom:'2px solid #000'
              }).siblings().css({
                color:'#a4a4a4',
                borderBottom:'none'
              })
            }
          })
      }
      getDate(tab) {
        var id=tab
        $.get('http://quan.lukou.com/api/search',
        {
            word: id,
            start: 0,
            sort: 0,
            couponOnly: NaN,
            minPrice: 0,
            maxPrice: 99999,
        },
        resp=>{
          if(
            resp.code==200){
            const {list}=resp.data
            $('.tab-foot').html(template("tab-foot-template",
            {list:list.slice(0,3)}))
          }
            //template第一个参数传id
            //第二个写对象,传入模板里所需要的属性
            //模板里需要list,这个数组从json里取到RESP
        })
       
      }
    }
    new Index()
  })
})

// $("button").on('click',function(){
//     $.get("/api/tab/1",{
//         start:0
//     },resp=>{
//         console.log(resp);
//     })
// })